<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="base.jsp" %>
<script src="${url }js/layer/layer.js"></script>
<script src="${url }bootstrap/js/jquery.validate.min.js"></script>
<style>
	.content-wrapper{margin-left: 0px}
</style>
<body class="hold-transition skin-blue sidebar-mini">

	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Main content -->
			<section class="content">
	            <!-- form start -->
				<form id="saveForm">
				<div class="row">
					<div class="col-md-12">
					<div class="box box-info">
			            <div class="box-header with-border">
			              <h3 class="box-title">数据库配置</h3>
			            </div>
			            <!-- /.box-header -->
			              <div class="box-body form-horizontal">
			              <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">数据库类型</label>
			                 <div class="col-sm-3">
			                   <select name="type" id="type" class="form-control select2">
			                 		<option value="">==请选择==</option>
		                 			<option value="mysql">mysql</option>
			                 	</select>
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">Ip地址</label>
			                 <div class="col-sm-3">
			                   <input type="text" class="form-control" name="ip" data-inputmask="'alias': 'ip'" data-mask>
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">端口</label>
			                 <div class="col-sm-3">
			                   <input type="text" class="form-control" id="port" name="port">
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">数据名</label>
			                 <div class="col-sm-3">
			                   <input type="text" class="form-control" id="dbname" name="dbname">
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">登录账号</label>
			                 <div class="col-sm-3">
			                   <input type="text" class="form-control" id="user" name="user">
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
			                 <div class="col-sm-3">
			                   <input type="password" class="form-control" id="password" name="password">
			                 </div>
			               </div>
			               <div class="form-group">
			                 <label for="inputEmail3" class="col-sm-2 control-label">重复密码</label>
			                 <div class="col-sm-3">
			                   <input type="password" class="form-control" id="rppasswd" name="rppasswd">
			                 </div>
			               </div>
			               
			               <div class="box-footer">
			                <a class="btn btn-info save">提交</a>
			                <a class="btn btn-default cancel" >取消</a>
			             </div>
			          </div>
			        </div>
				</form>
			</section>
		</div>
	</div>
	<script src="${url }plugins/input-mask/jquery.inputmask.js"></script> 
	<script src="${url }plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script type="text/javascript">
	$(function () {
		$('.save').on('click',function(){
			if($("#saveForm").valid()){
				$.ajax({
					type: "post", 
		            url: path+"addDB",
		            data:$('#saveForm').serialize(),
		            dataType: "json",
		            success: function(data){
		            	if(data){
		            		layer.alert('保存成功', {
		              		  closeBtn: 0
		              		}, function(){
			            		location.href = path+'toLogin';
		              		});
		            	}else{
		            		layer.alert('保存失败！');
		            	}
		            }
				});
			}
		});
	});
	
	$("#saveForm").validate({
	    rules: {
	    	type:'required',
	    	ip:'required',
	    	port: {
			 required: true,
			 range:[0,65535]
			},
			dbname:'required',
			user:'required',
			password:'required',
			rppasswd: {
			 required: true,
			 equalTo: '#password'
			}
	    },
	    messages: {
	    	type:'请选择数据库类型',
	    	ip:'请输入ip',
	    	port: {
			 required: '请输入端口号',
			 range:'端口号输入错误'
			},
			dbname: '请输入数据库名',
			user:'请输入登录账号',
			password:'请输入密码',
			rppasswd: {
			 required: '请再次输入密码',
			 equalTo: '两次密码输入不相同'
			}
	    }
	});
	
	//Money Euro
    $("[data-mask]").inputmask();
	</script>
	<style>
		.error{color:red;font-weight: 500;}
	</style>
</body>